<template>
    <el-dialog title="编辑职员" :visible.sync="is_show" :before-close="handleClose">
        <div class="personnel-detail">
            <el-form v-if="user_form" class="personnel-edit-form" label-position="right" label-width="160px" :model="user_form">
                <el-form-item label="姓名：">
                    <el-input v-model="user_form.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号码：">
                    <el-input v-model="user_form.mobile"></el-input>
                </el-form-item>
                <el-form-item label="是否离（调）职：">
                    <el-radio-group v-model="user_form.leave" size="small">
                        <el-radio-button label="是">是</el-radio-button>
                        <el-radio-button label="否">否</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="离（调）职时间：" v-if="user_form.leave === '是'">
                    <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="user_form.leaveTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="离（调）职去向：" v-if="user_form.leave === '是'">
                    <el-input type="textarea" v-model="user_form.leaveTo"></el-input>
                </el-form-item>
                <el-form-item label="职位：">
                    <el-select v-model="user_form.roleId" multiple style="margin-left: 20px;" placeholder="请选择">
                        <el-option v-for="item in role_list" :key="item.roleId" :label="item.name" :value="item.id * 1">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门：">
                    <el-tree :data="disabled_arr" :default-checked-keys="user_form.departmentId" ref="department_tree" show-checkbox node-key="id" :props="props" @check-change="handleCheckChange"></el-tree>
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input type="textarea" v-model="user_form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="onSubmit">修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";

import user from "@/api/user";
import department from "@/api/department";

export default {
    name: "user-edit",
    computed: {
        ...mapGetters({
            is_user_edit_dialog_show: "personnel/is_user_edit_dialog_show",
            role_list: "role/role_list",
            sys_department_tree: "department1/sys_department_tree"
        })
    },
    props: ["user_form"],
    data() {
        return {
            is_show: false,
            props: {
                label: "text",
                children: "children",
                value: "id"
            },
            department: undefined,
            disabled_arr: []
        };
    },
    methods: {
        handleClose() {
            this.$store.commit(
                "personnel/CHANGE_IS_USER_EDIT_DIALOG_SHOW",
                false
            );
            this.department = undefined;
        },
        handleCheckChange(data, checked) {
            if (checked) {
                this.user_form.departmentId.push(data.id);
            } else {
                this.user_form.departmentId.splice(
                    this.user_form.departmentId.indexOf(data.id),
                    1
                );
            }
        },
        onSubmit() {
            user
                .sendEditUserRequest(this.user_form)
                .then(res => {
                    this.$message({
                        message: "修改成功!",
                        type: "success"
                    });
                    user
                        .getTableData({ pageNumber: 1 })
                        .then(res => {
                            this.$store.commit(
                                "personnel/CHANGE_USER_LIST",
                                res
                            );
                        })
                        .catch(err => {
                            this.$message.error("刷新失败，请手动刷新!");
                        });
                })
                .catch(err => {
                    this.$message({
                        message: "哪里出现了问题~~",
                        type: "warning"
                    });
                });
            this.handleClose();
        },
        getDepandedArr(data) {
            for (let i = 0, len = data.length; i < len; i++) {
                if (data[i].children.length > 0) {
                    this.getDepandedArr(data[i].children);
                    data[i].disabled = true;
                }
            }
        },
        setChecked(value) {
            this.$refs.department_tree.setCheckedKeys(value.departmentId);
        },
        changeDisabledArr() {
            this.disabled_arr = JSON.parse(
                JSON.stringify(this.sys_department_tree)
            );
            this.getDepandedArr(this.disabled_arr);
        }
    },
    watch: {
        is_user_edit_dialog_show(newVal) {
            this.is_show = newVal;
        },
        sys_department_tree(newVal) {
            this.changeDisabledArr();
        }
    },
    async mounted() {
        // if (this.role_list === undefined) {
            this.$store.dispatch("role/getRoleList");
        // }
        if (this.sys_department_tree === undefined) {
            this.$store.dispatch("department1/getSysDepartmentTree");
        } else {
            this.changeDisabledArr();
        }
    }
};
</script>

<style>
.personnel-edit-form {
    margin: 0 auto;
    margin-top: 20px;
    width: 60%;
}
</style>
